<template>
  <AModal v-bind="$attrs" class="modal-container" @cancel="handleCancel">
    <template #title>
      <div
        style="width: 100%; cursor: move; user-select: none"
        @mouseover="() => setDisabled(false)"
        @mouseout="() => setDisabled(true)"
      >
        {{ props.title }}
      </div>
    </template>
    <template #modalRender="{ originVNode }">
      <RDraggable :disabled="disabled" :nodeRef="draggleRef">
        <component :is="originVNode" ref="draggleRef"></component>
      </RDraggable>
    </template>
    <slot></slot>
  </AModal>
</template>

<script setup>
import { ref } from 'vue';
import { RDraggable } from '@/components/custom';
import { useState } from '@/hooks';

defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  title: { type: String, default: 'Modal Pro' },
  onCancel: Function,
  onClose: Function
});
const draggleRef = ref(null);

const [disabled, setDisabled] = useState(true);

const handleCancel = (e) => {
  const isCancel = e.target.tagName === 'BUTTON' || e.target.offsetParent?.tagName === 'BUTTON';

  if (isCancel) {
    // 取消按钮
    return props.onCancel?.(e);
  }
  // 关闭按钮或点击空白区域
  return props.onClose ? props.onClose(false, e) : props.onCancel?.(false, e);
};
</script>

<style lang="scss">
// 解决打开对话框时，控制台报错提示
// Blocked aria-hidden on a <div> element because the element that just received focus must not be hidden from assistive technology users.
// Avoid using aria-hidden on a focused element or its ancestor.
// Consider using the inert attribute instead, which will also prevent focus.
// For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
.ant-modal div[aria-hidden='true'] {
  display: none;
}

.ant-modal.modal-container .ant-modal-content {
  padding: 0;

  .ant-modal-header {
    padding: 16px;
    margin-bottom: 0;
  }

  .ant-modal-body {
    max-height: 60vh;
    overflow: auto;
  }

  .ant-modal-footer {
    padding: 16px;
    margin-top: 0;
  }
}
</style>
